<template>
    <span v-if="number" class="bubble" :style="sty">{{number}}</span>
</template>

<script>
    export default {
        name: "bubble",
        props:{
            sty: Object,
            number: Number
        }
    }
</script>

<style scoped lang="stylus">
    .bubble
        color: white
        position: absolute
        display: flex
        justify-content: center
        align-items: center
        border-radius: 1em
        top: -20%
        right: -20%
        min-height:10px
        min-width: 10px
        font-size: 8px
        padding: 2px
        line-height:8px
        background: linear-gradient(to right, #fc9153, #f01414)
</style>